Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div class="scene">
 <button>
 
 100cqw
 100cqh
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Deploy
 
 
 Button
 Glows
 Text
 
 </button>
 </div> 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}
:root {
	--saturation: 20%;
	--transition: 0.15s;
  --glow: hsl(var(--hue, 150) 80% 70% / var(--alpha, 1));
	--border-radius: calc(var(--radius) * 1px);
	--border-width: calc(var(--thickness) * 1px);
	--active: 0;
	--glow-spread: calc(var(--spread) * 1deg);
}

body {
	background: hsl(260 0% 0%);
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family: 'Geist Sans', arial, system-ui, sans-serif;
	overflow: hidden;
}

button {
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--hue) var(--saturation) 72% / 0.15),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--hue) var(--saturation) 70% / 0.2),
			transparent
		),
		hsl(260 0% 2%);
	background: var(--bg);
	font-size: 2rem;
	font-family: 'Geist Sans';
	font-weight: 500;
	cursor: pointer;
	padding: 0.9em 2em;
	min-width: 280px;
	display: grid;
	border: 0;
  place-items: center;
	white-space: nowrap;
	border-radius: var(--border-radius);
	position: relative;
	box-shadow:
	  0 0.025em 0.4em -0.02em hsl(0 0% 100% / 0.25),
		0 0.05em 0 0 hsl(260 0% 50%) inset,
		0 -0.05em 0 0 hsl(260 0% 0%) inset;
	transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
	scale: calc(1 + (var(--active) * 0.025));
}

/* Feint border */
button::before {
	--saturation: 90%;
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid hsl(var(--hue) var(--saturation) 80% / 0.3);
	border-radius: var(--border-radius);
	pointer-events: none;
}

button:active {
  scale: 1;
}

@keyframes flip {
	to {
		rotate: 360deg;
	}
}

.spark:before {
	content: "";
	position: absolute;
}

/* Purely to decorate the use of CQ elements sliding along */
.spark:after {
/*	background: red;*/
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Optional backdrop – For some reason, if you go with the mask-composite, you lose the glow... */
.backdrop {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(transparent 5%, hsl(0 0% 0% / 0.5), transparent) padding-box,
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--hue) var(--saturation) 72% / 0.15),
			transparent
		) padding-box,
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--hue) var(--saturation) 70% / 0.2),
			transparent
		) padding-box,
		linear-gradient(hsl(var(--hue) var(--saturation) 5%), hsl(var(--hue) var(--saturation) 4%)) padding-box;
	border: var(--border-width) solid transparent;
	border-radius: var(--border-radius);
	transition: background var(--transition) opacity var(--transition);
/*	opacity: 0;*/
}

button:is(:hover, :focus-visible) {
	--active: 1;
	outline: none;
}

.text {
	translate: 0 0;
	font-family: 'Geist Sans';
	font-weight: 80;
	letter-spacing: 0.01ch;
	background:
		linear-gradient(
			95deg,
			hsl(0 0% 90%) 15%,
			hsl(0 0% 50% / 1),
			hsl(0 0% 100% / 0.2),
			hsl(0 0% 80%),
			hsl(0 0% 90%) 85%);
	background-size: 500% 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	color: transparent;
	transition: background-position calc(var(--transition) * 6);
}

button:is(:hover, :focus-visible) .text {
	animation: shimmer 1s both;
}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
}

button .spark__container {
  position: absolute;
  inset: 0px;
	/* With a backdrop */
	overflow: hidden;
	/* Without a backdrop	*/
  /*mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  border: var(--border-width) solid transparent;*/
}

.glows {
	filter: blur(calc(var(--blur) * 1px));
	container-type: size;
	position: absolute;
	inset: 0;
}

button > .spark__container {
	container-type: size;
}

button .spark:nth-of-type(2) {
	rotate: 180deg;
	animation-direction: alternate-reverse;
}

button .spark {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: visible;
  mask: none;
  animation: slide calc(var(--speed) * 1s) ease-in-out infinite alternate;
  animation-play-state: paused;
}

button:hover .spark {
	animation-play-state: running;
}

button .spark:before {
  inset: -100%;
  background: conic-gradient(
    from calc(270deg - (var(--glow-spread) * 0.5)),
    var(--glow) 0,
    var(--glow) var(--glow-spread),
    transparent var(--glow-spread));
  translate: 0 0;
  transform: rotate(0deg);
  width: auto;
  animation: spin calc(var(--speed) * 2s) infinite linear;
  animation-play-state: paused;
}

button:is(:hover, :focus-visible) .spark:before {
	animation-play-state: running;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }
  15%, 35% {
    rotate: 90deg;
  }
  65%, 85% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes slide {
  to {
    translate: calc(100cqw - 100%) 0;
  }
}

/* Overrides */
button .spark {
	background: transparent;
}
button .spark__container {
	border-radius: var(--border-radius);
	opacity: 0;
}

.spark {
	transition: opacity var(--transition);
	opacity: 0;
}

button:is(:hover, :focus-visible) .spark {
	opacity: 1;
}

button:is(:hover, :focus-visible) .spark__container:not(.spark__container--reveal) {
	animation: reveal calc(var(--window) * 1s) both;
}

@keyframes reveal {
	0%, 100% {
		opacity: 0;
	}
	20%, 80% {
		opacity: 1;
	}
}

[data-exploded] .spark,
[data-exploded] .spark__container:not(.spark__container--reveal),
[data-imploding] .spark,
[data-imploding] .spark__container:not(.spark__container--reveal),
[data-show-glows=true] .spark,
[data-show-glows=true] .spark__container:not(.spark__container--reveal) {
	opacity: 1;
}

[data-exploded] button .spark::before,
[data-exploded] button .spark,
[data-imploding] button .spark::before,
[data-imploding] button .spark,
[data-show-glows=true] button .spark::before,
[data-show-glows=true] button .spark {
	animation-play-state: running;
}
[data-exploded] button:is(:hover, :focus-visible) .spark__container,
[data-show-glows=true] button:is(:hover, :focus-visible) .spark__container {
	animation: none;
}

/* 3D stuff */
* { transform-style: preserve-3d; }

[data-exploded] .scene {
	transform: rotateX(-30deg) rotateY(45deg) rotateX(90deg);
}

/* Timings */
[data-exploded] .scene {
	transition: transform 1s;
}

[data-exploded] .spark__container,
[data-exploded] .glows {
	transition: transform 1s 1.5s;
}

[data-exploded] button .text {
	transition: transform 1s 1.5s;
}

[data-exploded] .spark__container--reveal {
	transition: opacity 1s 4s, transform 1s 1.5s;
}

[data-exploded] .label {
	opacity: 1;
	transition: opacity 0.5s 5s;
}

[data-exploded] .label:nth-of-type(2) {
	transition: opacity 0.5s 5.1s;
}
[data-exploded] .label:nth-of-type(3) {
	transition: opacity 0.5s 5.2s;
}

[data-exploded] .measurements {
	transition: opacity 0.5s 6s;
}

/* Reverse */

.measurements {
	transition: opacity 0.5s 0s;
	pointer-events: none;
}

.label {
	transition: opacity 0.5s 1.2s;
	pointer-events: none;
}
.label:nth-of-type(2) {
	transition: opacity 0.5s 1.1s;
}
.label:nth-of-type(3) {
	transition: opacity 0.5s 1s;
}

button > .spark__container--reveal {
	transition: opacity 1s 3s;
}

.spark__container,
.glows {
	transition: transform 1s 4s;
}

button .text {
	transition: transform 1s 4s;
}

.scene {
	transition: transform 1s 6s;
}

/* End Timings stuff */

[data-exploded] .text {
	transform: translate3d(0, 0, 200px);
}

[data-imploding] button > .spark__container:not(.spark__container--reveal),
[data-imploding] .glows,
[data-exploded] button > .spark__container:not(.spark__container--reveal),
[data-exploded] .glows {
	overflow: visible;
	mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  border: var(--border-width) solid transparent;
}

[data-exploded] button > .spark__container:not(.spark__container--reveal),
[data-exploded] .glows {
	opacity: 1;
	transform: translate3d(0, 0, 100px);
}

.spark__container--reveal {
	transform: translate3d(0, 0, 100px);
}

[data-imploding] .spark__container--reveal {
	overflow: visible;
	border-radius: 0;
}
[data-exploded] .spark__container--reveal {
	opacity: 1;
	overflow: visible;
	border-radius: 0;
}

.spark__container--reveal .spark::before {
	opacity: 0.25;
}

.label {
	position: absolute;
	left: calc(100% + 6rem);
	translate: 0 -50%;
	top: 50%;
	color: hsl(0 0% 80%);
	font-weight: 40;
	opacity: 0;
}

.spark__container--reveal .spark::after {
/*	background: red;*/
	opacity: 0.65;
	border: 4px dashed hsl(0 0% 80%);
}

[data-exploded] .measurements {
	opacity: 1;
}

.labels {
	position: absolute;
	inset: 0;
}

.label--glow {
	transform: translate3d(0, 0, 100px);
}
.label--text {
	transform: translate3d(0, 0, 200px);
}

.measurements {
	position: absolute;
	inset: 0;
	font-weight: 40;
	font-family: 'Geist Sans';
	font-size: 1em;
	color: hsl(0 0% 50%);
	opacity: 0;
	pointer-events: none;
}

.width {
	position: absolute;
	left: 50%;
	top: 100%;
	translate: -50% 100%;
}

.height {
	position: absolute;
	right: 100%;
	top: 50%;
	translate: 0% -50%;
	rotate: 90deg;
}

console.log("Event Fired")
import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const SCENE = document.querySelector('.scene')
const BUTTON_TEXT = document.querySelector('.text')

const CTRL = new GUI()

const CONFIG = {
  text: "Deploy",
  hue: 180,
  alpha: 1,
  window: 1.4,
  speed: 1,
  blur: 10,
  spread: 120,
  thickness: 2,
  radius: 32,
  constant: false,
  exploded: false
}

const UPDATE = () => {
  console.info('cool')
  for (const KEY of Object.keys(CONFIG)) {
    if (KEY === 'exploded' || KEY === 'constant') break
    document.documentElement.style.setProperty(`--${KEY}`, CONFIG[KEY])
  }
  document.body.dataset.showGlows = CONFIG.constant
}

const TOGGLE = () => {
  const exploded = CONFIG.exploded
  document.body.toggleAttribute('data-exploded')
  if (!exploded) {
    // Need to tear down the explosion
    document.body.toggleAttribute('data-imploding')
    const TRANSITION = SCENE.getAnimations()
    console.info({ TRANSITION })
    Promise.all([...TRANSITION.map(t => t.finished)]).then(() => {document.body.toggleAttribute('data-imploding')})
  }
}

const CHANGE_LABEL = () => {
  BUTTON_TEXT.innerText = CONFIG.text
}

CTRL.add(CONFIG, 'text').name('Label').onChange(CHANGE_LABEL)
CTRL.add(CONFIG, 'hue', 0, 359, 1).name('Hue').onChange(UPDATE)
CTRL.add(CONFIG, 'alpha', 0.1, 1, 0.1).name('Alpha').onChange(UPDATE)
CTRL.add(CONFIG, 'window', 0.5, 5, 0.1).name('Reveal (s)').onChange(UPDATE)
CTRL.add(CONFIG, 'speed', 0.5, 5, 0.1).name('Speed (s)').onChange(UPDATE)
CTRL.add(CONFIG, 'blur', 0, 50, 1).name('Blur (px)').onChange(UPDATE)
CTRL.add(CONFIG, 'spread', 10, 180, 1).name('Spread (deg)').onChange(UPDATE)
CTRL.add(CONFIG, 'thickness', 1, 10, 1).name('Thickness (px)').onChange(UPDATE)
CTRL.add(CONFIG, 'radius', 0, 100, 1).name('Radius (px)').onChange(UPDATE)
CTRL.add(CONFIG, 'constant').name('Show Glows').onChange(UPDATE)
CTRL.add(CONFIG, 'exploded').name('Explode').onChange(TOGGLE)

UPDATE()

Frontend Forever App